<template>
  <div class="viewContain">
    <el-form :model="listQuery" size="small" label-width="100px">
      <el-row>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="商品编码 :">
            <el-input
              v-model="listQuery.code"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="商品名称 :">
            <el-input
              v-model="listQuery.name"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
          <el-form-item label-width="20px">
            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
            <el-button size="mini" type="primary" plain @click="handleReload1">重置</el-button>
            <el-button size="mini" type="primary" @click="handlePurchaseRecord">采购记录</el-button>
            <el-button size="mini" type="primary" @click="handleRefundRecord">退货记录</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      ref="table"
      v-loading="loading"
      fit
      stripe
      :data="tableData"
      border
      size="mini"
    >
      <el-table-column align="center" label="序号" type="index" width="50">
        <template slot-scope="scope">
          {{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="no" align="center" label="商品图片" width="150">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.photo"
            style="width: 40px; height: 40px"
            :src="scope.row.photo"
          />
          <img v-else width="40px" height="40px" src="@/assets/images/noneImg.jpg">
        </template>
      </el-table-column>
      <el-table-column prop="code" align="center" label="商品编号" />
      <el-table-column prop="name" align="center" label="商品名称" />
      <el-table-column prop="stock" align="center" label="商品库存" />
    </el-table>
    <pagination
      :total-count="totalCount"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { commonMixin } from '@v/mixin/commonMixin.js'
import ComApiUrl from '@a/comomApi.js'
import pagination from '@/components/pagination/index.vue'

export default {
  components: { pagination },
  mixins: [commonMixin],
  data() {
    return {
      comApiUrlList: new ComApiUrl('/member/api/site/getSiteList'),
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        site: ''
      },
      tableData: [],
      orgId: ''
    }
  },
  mounted() {
    this.comFun()
  },
  methods: {
    comFun() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.listQuery.site = userInfo.orgId
      this.orgId = userInfo.orgId
      this.getList()
    },
    getList() {
      this.getInfo()
    },
    // 采购记录
    handlePurchaseRecord() {
      this.$router.push('/business/address/purchase/' + this.orgId)
    },
    // 退货记录
    handleRefundRecord() {
      this.$router.push('/business/address/refund/' + this.orgId)
    },
    handleReload1() {
      this.listQuery = {
        pageNo: 1,
        pageSize: 10,
        site: '',
        code: '',
        name: ''
      }
      this.comFun()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
